{% extends "base.html" %}

{% block title %}Account{% endblock %}

{% block body %}
    {# 检查是否登录 #}
    {% if user_info %}
        <!-- Quick Operate Navbar -->
        {% include "component/quick-operate-navbar.html" %}

        <div class="list-group">
            {% for name, platform in platforms.items %}
                <a href="/site/account-list?platform={{ name }}" class="btn-link">
                    <li class="list-group-item d-flex justify-content-between align-items-center bg-grey text-light">
                        {{ name }}
                        <span class="badge badge-light badge-pill">{{ platform.accounts|length }}</span>
                    </li>
                </a>
                {% for a in platform.accounts %}
                    <a href="/site/account-detail?id={{ a.id }}" class="list-group-item list-group-item-action flex-column align-items-start">
                        <div class="d-flex w-100 justify-content-between">
                            <h5 id="account-name-{{ a.id }}" class="mb-1">{{ a.name }}</h5>
                            <small>{{ a.create_time }}</small>
                        </div>
                        <p id="account-notes-{{ a.id }}" class="mb-1">{{ a.notes }}</p>
                        <small id="account-{{ a.id }}">{{ a.account }}</small>
                    </a>
                    <script>
                        // 如果已经解锁，则解密数据
                        $(document).ready(function () {
                            if (isLogin()) {
                                // $("#account-name").text(decrypt_data("{{ a.name }}"));
                                // 检测解锁状态
                                try {
                                    $("#account-notes-{{ a.id }}").text(decrypt_data("{{ a.notes }}"));
                                    $("#account-{{ a.id }}").text(decrypt_data("{{ a.account }}"));
                                }
                                catch (e) {
                                    console.log(e.toString());
                                    $("#account--{{ a.id }}").html("<b class=\"text-danger\">The key your provide is wrong, unlock failed, please refresh.</b>");
                                    $("#account-{{ a.id }}").text("This content is locked.");
                                    del_pwd();
                                }
                            }
                            else {
                                $("#account-notes-{{ a.id }}").html("<b class=\"text-warning\">This content is locked. Please enter your key to unlock.</b>");
                                $("#account-{{ a.id }}").text("This content is locked.");
                            }
                        })
                    </script>
                {% endfor %}
            {% empty %}
                <div class="list-group-item flex-column align-items-start">
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1"><i class="material-icons-sm">error_outline</i>
                            Empty</h5>
                        <small>{% now "t" %}</small>
                    </div>
                    <p class="mb-1">You have no any account platforms.</p>
                    <small>Use <b>Quick Add</b> to add a new accounts!</small>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <!-- 加载登录跳转组件 -->
        {% include "component/jump-to-sign-in.html" %}
    {% endif %}

    <!-- 加载数据安全组件 -->
    {% include "component/data-secure.html" %}
{% endblock %}
